<template>
	<div class="sn-common-container ">
		<div class="prcoss-container">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-select v-model="OpenDistribution" value-key="" placeholder="是否开启配货" @change="currentChange(1)" style="width: 120px;margin-right: 10px;"  filterable >
						<el-option :label="'全部'" :value="'all'"></el-option>
						<el-option :label="'已开启'" :value="true"></el-option>
						<el-option :label="'未开启'" :value="false"></el-option>
					</el-select>
					<el-input v-model="searchValue" placeholder="输入商品名称筛选" style="width: 200px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-input v-model="searchBoxSize" placeholder="输入商品箱规筛选" style="width: 200px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />	
					<el-input v-model="searchBarcode" placeholder="输入商品条码筛选" style="width: 200px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />	
					<el-button class="sn-btn"  type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" 
						@click="syncItemFn()">
						一键同步
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入商品名称筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
					</el-button>
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" @click="syncItemFn()">
						新增
					</el-button>
				</div>
			</header>
			<section>
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage"
					:pageSize="pageSize" :headerData="initData" :data="tabelData" :isFullScreen="false" :operateW="100">
					<template #openDistribution="scope">
						<span style="margin-left: 10px;">{{ scope.row.openDistribution?'开':'关'}}</span>
					</template>
					<template #operate="scope">
						<span> 
							<el-button type="warning" size="mini" @click="editItemOpen(scope.row)">修改</el-button>
						</span>
					</template>
				</global-table>
			</section>
			<footer>
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		<el-dialog
		:visible.sync="syncDialog"
		class="sn-default-dialog"
		>
		<div class="sn-title" slot="title">同步闪酿商品</div>
		<div>
			<div class="sn-flex sn-row-center">
				<!-- <el-progress :stroke-width="22" :percentage="percentage" :color="colors"></el-progress> -->
				<el-progress style="width:500px;" :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>

			</div>
			<p style="text-align:center;">
				{{progressText}}
			</p>
		</div>
		</el-dialog>
		<el-dialog
		:visible.sync="editItemDialog"
		class="sn-default-dialog"
		width="400px"
		>
		<div class="sn-title" slot="title">{{editItemName}}</div>
		<div>
			<el-form :model="editItemInfo" label-width="100px" label-position="top">
				<el-form-item label="商品条形码">
					<el-input v-model="editItemInfo.barcode" placeholder="请输入商品条形码"></el-input>
				</el-form-item>
				<el-form-item label="箱规">
					<el-input-number v-model="editItemInfo.boxSize" size="normal" label=""
						:min="1" :max="999" :step="1" :controls="true" controls-position="both">
					</el-input-number>
				</el-form-item>
				<el-form-item label="配货开关">
					<el-switch v-model="editItemInfo.openDistribution" :active-value="true" :inactive-value="false">
					</el-switch>
				</el-form-item>
			</el-form>
			<p style="text-align:center;">
				<el-button type="primary" size="default" @click="SaveItemFn">保存</el-button>
				<el-button type="info" size="default" @click="editItemDialog=false">取消</el-button>
			</p>
		</div>
		</el-dialog>
	</div>
</template>
  
<script>
import { GetItemsPage,SaveItem,StartSyncItemsTask,CancelSyncItemsTask,GetSyncItemsTaskInfos} from '@/api/itemList';
import { guid } from '@/utils';
import GlobalTable from '@/components/GlobalTable';
export default {
	components: { GlobalTable},
	data() {
		return {
			tableLoading: false,
			tabelData: [],
			initData: [//表单的显示配置
				{
					label: '商品名称',
					value: 'name',
					id: guid(),
				},
				{
					label: '商品图片',
					value: 'imageUrl',
					id: guid(),
					type: 'img',
					imgStyle: {
						width: '50px',
						height: '50px'
					}
				},
				{
					label: '规格',
					value: 'specification',
					id: guid(),
				},
				{
					label: '分类',
					value: 'categoryName',
					id: guid(),
					width:100
				},
				{
					label: '条形码',
					value: 'barcode',
					id: guid(),
				},
				{
					label: '箱规',
					value: 'boxSize',
					id: guid(),
					width:100
				},
				{
					label: '配货开关',
					value: 'openDistribution',
					id: guid(),
					width:100,
					isCustom:true,
				},
				
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			searchBoxSize:'',
			searchBarcode:'',
			syncDialog: false,
			colors: [
				{color: '#f56c6c', percentage: 20},
				{color: '#e6a23c', percentage: 40},
				{color: '#5cb87a', percentage: 60},
				{color: '#1989fa', percentage: 80},
				{color: '#6f7ad3', percentage: 100}
			],
			percentage:0,
			timer:null,
			progressText:'',
			editItemInfo:{
				boxSize:'',
				id:'',
				barcode:'',
				openDistribution:true
			},
			OpenDistribution:'all',
			editItemName:'',
			editItemDialog:false,
		}
	},
	created() {
		this.getDataListFn();
	},
	methods: {
		async SaveItemFn(){
			if(!this.editItemInfo.barcode){
				this.$message.error('请输入商品条形码');
				return false;
			}
			let res = await SaveItem(this.editItemInfo);
			if(res.code===200){
				this.editItemDialog=false
				this.$message.success('保存成功');
				this.getDataListFn();
			}else{
				this.$message.error(res.erroMessage);
			}
		},
		editItemOpen(data){
			this.editItemName = data.name;
			this.editItemInfo.id = data.id;
			this.editItemInfo.boxSize = data.boxSize;
			this.editItemInfo.barcode = data.barcode;
			this.editItemInfo.openDistribution = data.openDistribution;
			this.editItemDialog= true;
		},
		lookProgress(id,name){
			this.syncDialog=true
			this.percentage=0
			clearInterval(this.timer)
			let that = this;
			this.timer=setInterval(async ()=>{
				that.percentage= await that.getPercentageFn(id);
				if(this.percentage>=100){
					clearInterval(this.timer);
					that.CancelSyncFn();
					that.syncDialog=false;
				}
			},3000)
		},
		async getPercentageFn(){
			let res = await GetSyncItemsTaskInfos();
			if(res.code===200){
				this.progressText = res.data.completed+'/'+res.data.total;
				return res.data.success?100:(res.data.completed/res.data.total).toFixed(2)*100
			}else{
				this.$message.error(res.erroMessage);
				return false;
			}
		},
		async CancelSyncFn(){
			let res = await CancelSyncItemsTask();
			if(res.code===200){
				this.syncDialog=false;
				this.getDataListFn();
			}else{
				this.$message.error(res.erroMessage);
			}
		},
		//开始同步
		async syncItemFn() {
			let res = await StartSyncItemsTask(this.chooseItemInfo);
			if (res.code === 200) {
				this.$message.success('开始同步');
				this.lookProgress();
			} else {
				this.$message.error(this.addOrEditTitle+'失败，错误信息：' + res.erroMessage)
			}
		},
		//   分页器变化
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		//获取商品列表
		async getDataListFn() {
			this.tableLoading = true;
			let params = {
				pageIndex: this.currentPage,
				pageSize: this.pageSize,
				Name: this.searchValue,
			}
			if(this.searchBoxSize !=''){
				params.BoxSize = this.searchBoxSize;
			}
			if(this.searchBarcode !=''){
				params.Barcode = this.searchBarcode;
			}
			if(this.OpenDistribution !='all'){
				params.OpenDistribution = this.OpenDistribution;
			}
			try {
				const res = await GetItemsPage(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.tabelData = res.data.list;
					this.totalNum = res.data.totalCount;
				} else {
					this.tabelData = [];
					this.$message.error('获取商品列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
			}
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}
</style>